/*
 * @Description: 真实性格式设置弹窗
 * @Author: Rfan
 * @Date: 2022-10-10 20:45:23
 * @LastEditTime: 2022-10-22 17:15:24
 */

import { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Modal, Space } from 'antd';
import classnames from 'classnames/bind';
import { selectItemByKey } from '@/utils/list';
import { CheckCircleFilled } from '@ant-design/icons';
import { EnumCheckContentType, EnumFieldCheckType } from '../../../../../../../../dictionaries';
import type { IPropsRuleWithSetting } from '@/view/system/ArchivesDetection/interface';
import styles from '../../../../../styles/entryPanes.module.scss';

const cx = classnames.bind(styles);

interface IFieldRangeProps {
  data: any;
  onChange: any;
}

const FieldRange = (props: IFieldRangeProps) => {
  const { data, onChange } = props;
  const [form] = Form.useForm();

  // 弹窗展示状态
  const [visible, setVisible] = useState(false);
  // icon显示状态
  const [iconState, setIconState] = useState(false);
  // 格式检测数据
  const [ruleData, setRuleData] = useState<IPropsRuleWithSetting<EnumFieldCheckType>>({
    ruleType: EnumFieldCheckType.ValueRange,
    ruleValid: false,
    rule: {
      contentType: EnumCheckContentType.Regular,
      content: ''
    }
  });

  useEffect(() => {
    if (data?.rules) {
      const itemData = selectItemByKey(EnumFieldCheckType.ValueRange, data.rules, 'ruleType');
      if (itemData && itemData.rule) {
        setRuleData(itemData);
        setIconState(!!itemData.rule.content);
      }
    }
  }, [data]);

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(ruleData.rule);
    }
  }, [visible]);

  // 提交表单
  const submitFunc = () => {
    form.submit();
  };

  // 保存值域设置
  const onFinish = (values: any, type?: 'checkbox') => {
    const fieldRuleType = EnumFieldCheckType.ValueRange;
    const rule = type === 'checkbox' ? ruleData.rule : { ...ruleData.rule, ...values };

    const editLengthObj = {
      ...ruleData,
      ruleValid: type === 'checkbox' ? values.ruleValid : ruleData.ruleValid,
      rule
    };

    onChange(data.key, fieldRuleType, editLengthObj);
    closeDialog();
  };

  /**
   * @description: 复选框变化事件
   * @param {any} evt
   */
  const checkboxChange = (evt: any) => {
    onFinish({ ruleValid: evt.target.checked }, 'checkbox');
  };

  /**
   * @description: 关闭弹窗
   */
  const closeDialog = () => {
    setVisible(false);
  };

  return (
    <>
      <Space size={2}>
        <Checkbox checked={ruleData.ruleValid} onChange={checkboxChange} />
        <div className={cx('btn-with-state')}>
          <Button
            type="link"
            size="small"
            onClick={() => {
              setVisible(true);
            }}
          >
            值域设置
          </Button>
          {iconState && <CheckCircleFilled className={cx('success')} />}
        </div>
      </Space>

      <Modal
        destroyOnClose
        title="值域设置"
        visible={visible}
        width={350}
        onCancel={() => {
          closeDialog();
        }}
        footer={[
          <Button
            key="back"
            size="small"
            onClick={() => {
              closeDialog();
            }}
          >
            取消
          </Button>,
          <Button key="submit" size="small" type="primary" onClick={submitFunc}>
            确定
          </Button>
        ]}
      >
        <Form
          form={form}
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
          preserve={false}
          onFinish={onFinish}
        >
          <Form.Item label="值域设置" name="content">
            <Input.TextArea rows={2} placeholder="请填写正则表达式" />
          </Form.Item>
          {/* <Form.Item label="被检测值区间">
            <Radio.Group>
              <Radio value="all">全部</Radio>
              <Radio value="part">部分</Radio>
            </Radio.Group>
          </Form.Item>
          <div>
            <Form.Item label="值域设置">
              <Radio.Group>
                <Radio value="enum">字符枚举</Radio>
                <Radio value="number">数值</Radio>
                <Radio value="date">日期</Radio>
                <Radio value="time">时间</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item>
              <Input.TextArea placeholder="请填写值域内容，多值以“,”隔开" />
            </Form.Item>
          </div>
          <div>
            <Form.Item label="值域设置">
              <Radio.Group>
                <Radio value="enum">字符枚举</Radio>
                <Radio value="number">数值</Radio>
                <Radio value="date">日期</Radio>
                <Radio value="time">时间</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item>
              <Input.TextArea placeholder="请填写值域内容，多值以“,”隔开" />
            </Form.Item>
          </div> */}
        </Form>
      </Modal>
    </>
  );
};

export default FieldRange;
